<template>
  <div class="order">
    <van-sticky>
      <van-nav-bar
        title="我的订单"
        left-arrow
        @click-left="onClickLeft"
      >
        <van-icon
          name="search"
          slot="right"
        />
      </van-nav-bar>
    </van-sticky>
    <ul class="order-list">
      <li
        class="order-list2"
        v-for="(item,index) in goodsMessage"
        :key='index'
      >
        <div class="box1 dd">
          <div class="box1-left">
            <div class="img1">
              <img
                :src="item.src"
                alt
              />
            </div>
            <div class="arrive-timer">
              <p class="fdd">{{item.sellerName}}</p>
              <p class="arrTime">2019-09-03 11:07</p>
            </div>
          </div>
          <div class="box1-right">订单已送达</div>
        </div>
        <van-divider />
        <div class="box2 dd">
          <p class="box2-left">{{item.name}} X {{item.num}}</p>
          <p class="box2-right">￥{{item.price*item.num}}</p>
        </div>
        <van-divider />
        <div class="box3 dd">
          <van-button
            plain
            hairline
            type="primary"
            class="btn"
          >再来一单</van-button>
        </div>
      </li>
    </ul>

    <div class="tarbar">
      <van-tabbar
        v-model="active"
        fixed
      >
        <van-tabbar-item
          icon="home-o"
          to="/home"
        >首页</van-tabbar-item>
        <van-tabbar-item
          icon="browsing-history-o"
          to="/find"
        >发现</van-tabbar-item>
        <van-tabbar-item
          icon="orders-o"
          to="/order"
        >订单</van-tabbar-item>
        <van-tabbar-item
          icon="setting-o"
          to="/mine"
        >我的</van-tabbar-item>
      </van-tabbar>
    </div>

    <div
      class="noInfo"
      v-show="flag"
    >
      <h4>暂无订单信息哦</h4>
      <img
        src="http://5b0988e595225.cdn.sohucs.com/images/20171115/e91ffb2a42074766b7a9280bcff55591.gif"
        alt=""
      >
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    active: 2,
    goodsMessage: [],
    same: [],
    flag: false
  }),
  created() {
    this.getMessage()
    this.getInfo()
    this.goodsMessage = JSON.parse(localStorage.getItem('cartList') || '[]')
    if (this.goodsMessage.length == 0) {
      this.flag=!this.flag
    }
  },
  methods: {
    getMessage() {
      this.goodsMessage = JSON.parse(localStorage.getItem('cartList') || '[]')
    },
    async getInfo() {
      const {
        data: { status, sellers }
      } = await this.$axios.get('/api/getdetail/seller')
      if (status !== 0) return console.log(status)
    },
    onClickLeft() {
      console.log(111)
    }
  }
}
</script>
<style lang="less" scoped>
.order {
  min-height: 600px;
  background: #eee;
  img {
    width: 50px;
    height: 50px;
    margin-top: 20px;
    margin-right: 10px;
  }
  .van-nav-bar {
    background-color: #0085ff;
    .van-nav-bar__title {
      color: #fff;
    }
    .van-icon {
      font-size: 22px;
      color: #fff;
    }
  }
  ul {
    list-style: none;
    li {
      .van-divider {
        margin: 0;
      }
    }
  }
  .order-list {
    background: #fff;
    margin-bottom: 50px;
    .order-list2 {
      border-top: 1px solid #999;
      padding: 5px 10px;
      margin-bottom: 10px;
    }
    .order-list2:nth-of-type(1) {
      border-top: none;
    }
    .dd {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .box1-left {
        display: flex;
        .arrTime {
          font-size: 4px;
          color: #999;
        }
      }
      .box2-left {
        margin-left: 50px;
        font-size: 13px;
      }
      .box2-right {
        color: red;
      }
    }
    .box3 {
      .van-button--normal {
        padding: 0 10px;
        font-size: 14px;
      }
      .btn {
        position: relative;
        left: 280px;
      }
    }
  }
  .noInfo {
    // display: none;
    text-align: center;
    img {
      width: 300px;
      height: 300px;
      padding: 0;
      margin: 0;
      border-radius: 50%;
    }
  }
}
</style>